<template>
  <div class="box">
    <van-nav-bar
      left-arrow
      title="医美百科"
      @click-left='$router.go(-1)'
      :border="false"
    >
      <!-- <template #title>
        <van-search v-model="value" placeholder="搜百科" shape="round" />
      </template> -->
    </van-nav-bar>
    <section>
      <ul>
        <li v-for="(item,index) of kindList" :key="index" @click="$router.push('/medical/medicalPro?encyclopedia_type='+item.encyclopedia_type)">
          <b>{{ item.encyclopedia_type }}</b>
          <img :src="item.item_show" alt="" />
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Search } from 'vant'
import { getMedical } from '@/api'
Vue.use(NavBar)
Vue.use(Search)
export default {
  data () {
    return {
      value: '',
      kindList: [
        {
          encyclopedia_type: '玻尿酸',
          item_show: require('../../assets/medical/asd4893.png')
        },
        {
          encyclopedia_type: '除皱瘦脸',
          item_show: require('../../assets/medical/asd4894.png')
        },
        {
          encyclopedia_type: '眼部整形',
          item_show: require('../../assets/medical/asd4895.png')
        },
        {
          encyclopedia_type: '鼻部整形',
          item_show: require('../../assets/medical/asd4894.png')
        }
      ]
    }
  },
  mounted () {
    getMedical().then(res => {
      this.list = res.data.data
    })
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
/deep/ .van-nav-bar__title {
  font-weight: bold;
}
/deep/ .van-icon-arrow-left {
  font-size: 0.22rem;
  color: #171717;
}
/deep/ .van-nav-bar__title {
  font-size: 0.18rem;
  font-weight: bold;
  color: #171717;
}
section {
  padding: 0 0.1rem;
  font-family:PingFang SC;
  overflow: auto;
  ul {
    width: 100%;
    list-style: none;
    margin-bottom: 0.3rem;
    li{
      margin-top: 0.2rem;
      &+li{
        margin-top: 0.2rem;
      }
      b {
        margin-left: 0.1rem;
        font-weight:500;
        padding-left: 0.05rem;
        border-left: 0.01rem solid rgb(241,171,250);
        font-size: 0.15rem;
        height: 0.15rem;
      }
      img{
        height: 1.35rem;
        width: 3.55rem;
        margin-top: 0.1rem;
      }
    }
  }
}
</style>
